import React, { useEffect, useState } from 'react';
import { Input, Button, DateRangePicker, Table, Pagination } from 'element-react';
import { getGridData, deleteGridData } from '../actions';
import 'element-theme-default';
import './index.less';

// 审核列表
function AuditList(props) {
    const columns = [{
        label: "用户名",
        prop: "name",
        width: 350
    }, {
        label: "产品线",
        prop: "productLine",
        width: 350
    }, {
        label: "行业",
        prop: "trade",
        width: 350
    }, {
        label: "创建时间",
        prop: "createTime",
        width: 600
    }, {
        label: "操作",
        prop: "options",
        fixed: 'right',
        render: (data) => {
            return <span>
                <Button 
                    type="text" 
                    size="small"
                    onClick={goAuditPage}>审核</Button>
                <Button 
                    type="text" 
                    size="small"
                    onClick={deleteHandle.bind(null, data.id)}>删除</Button>
            </span>
        }
    }];

    const goAuditPage = () => {
        props.history.push('./detail');
    } 

    const deleteHandle = async (id) => {
        const params = {
            id
        };

        const { list, total } = await deleteGridData(params);
        setData(list);
        setTotal(total);
    }

    const [data, setData] = useState([]);
    const [total, setTotal] = useState(0);
    const [pageIndex, setPageIndex] = useState(1);
    const curChangeHandle = (pageIndex) => {
        setPageIndex(pageIndex);
    }
    useEffect(() => {
        async function getData() {
            const params = {
                pageIndex
            };
            const { list, total } = await getGridData(params);
            setData(list);
            setTotal(total);
        }
        getData();
    }, [pageIndex]);

    // 搜索区
    const SearchArea = () => {
        const [createTime, setCreateTime] = useState(null);
        const searchGrid = async () => {
            const params = {
                name,
                productLine,
                trade,
                createTime,
                pageIndex: 1
            };
            const { list, total } = await getGridData(params);
            setData(list);
            setTotal(total);
        }
        const [name, setName] = useState('');
        const [productLine, setProductLine] = useState('');
        const [trade, setTrade] = useState('');
        const changeHandle = (key, value) => {
            const handleObj = {
                setName,
                setProductLine,
                setTrade
            };

            handleObj?.[`set${key}`](value);
        }
        return (
            <div className="search-wrapper">
                <div className="search-item">
                    <label className="search-item-label">用户名：</label>
                    <Input
                        value={name}
                        placeholder="请输入用户名"
                        onChange={changeHandle.bind(null, 'Name')} />
                </div>
                <div className="search-item">
                    <label className="search-item-label">产品线：</label>
                    <Input
                        value={productLine}
                        placeholder="请输入产品线"
                        onChange={changeHandle.bind(null, 'ProductLine')} />
                </div>
                <div className="search-item">
                    <label className="search-item-label">行业：</label>
                    <Input
                        value={trade}
                        placeholder="请输入行业"
                        onChange={changeHandle.bind(null, 'Trade')} />
                </div>
                <div className="search-item">
                    <label className="search-item-label">任务创建时间：</label>
                    <DateRangePicker
                        value={createTime}
                        placeholder="选择日期范围"
                        isShowTime={true}
                        onChange={date => {
                            setCreateTime(date);
                        }}
                    />
                </div>
                <Button
                    type="primary"
                    icon="search"
                    onClick={searchGrid}>搜索</Button>
            </div>
        );
    }

    return (
        <div className="audit-list-wrapper">
            <SearchArea />
            <Table
                className="list-grid"
                style={{ width: '100%' }}
                columns={columns}
                data={data}
                border={true}
            />
            <Pagination
                layout="prev, pager, next"
                total={total}
                onCurrentChange={curChangeHandle} />
        </div>
    );
}

export default AuditList;